import React, { useRef, useEffect } from "react";
import { Button, Space, Form, Input, Upload, Select } from "antd";
import { useTranslation } from "react-i18next";
import { createUploadProgress } from "@/types/antdfc";
import { normFile } from "@/types/myfc";
import UploadButton from "@/components/uploadButton";
const { TextArea } = Input;
import { IdataType, ItagType } from "@/types/type";

interface Props {
  data: IdataType | undefined;
  tags: ItagType[] | undefined;
  handleForm: (value: any) => void;
  dialog: string;
}

const MyForm: React.FC<Props> = (props: Props) => {
  const { data, tags, handleForm, dialog } = props;
  const { t } = useTranslation();
  const formRef = useRef(null);
  const [form] = Form.useForm();
  useEffect(() => {
    if (formRef) {
      form.setFieldsValue(
        data === undefined
          ? { name: "", url: [], description: "", tags: [] }
          : {
              ...data,
              url: [
                {
                  name: data.url,
                  url: import.meta.env.VITE_TARGET + "/upload/" + data.url,
                },
              ],
            }
      );
    }
  }, [dialog, data]);
  return (
    <Form
      labelCol={{ span: 3 }}
      onFinish={value => {
        handleForm(value);
        form.resetFields();
      }}
      form={form}
      ref={formRef}
      style={{ padding: "15px 0 0 0" }}
    >
      {/* 名称 */}
      <Form.Item
        label={t("table.name")}
        name="name"
        rules={[{ required: true, message: t("form.nametip") }]}
      >
        <Input placeholder={t("form.namep")} showCount maxLength={20} />
      </Form.Item>

      {/* 标签 */}
      <Form.Item
        label={t("table.tag")}
        name="tags"
        rules={[{ required: false }]}
      >
        <Select
          mode="multiple"
          allowClear
          style={{ width: "100%" }}
          placeholder={t("form.tagp")}
          fieldNames={{ label: "name", value: "id" }}
          options={tags}
        />
      </Form.Item>

      {/* 描述 */}
      <Form.Item
        label={t("table.desc")}
        name="description"
        rules={[{ required: true, message: t("form.desctip") }]}
      >
        <TextArea
          showCount
          maxLength={50}
          style={{
            height: 60,
            resize: "none",
          }}
          placeholder={t("form.descp")}
        />
      </Form.Item>

      {/* 图片 */}
      <Form.Item
        label={t("table.linkurl")}
        name="url"
        valuePropName="fileList"
        rules={[{ required: false }]}
        getValueFromEvent={normFile}
      >
        <Upload maxCount={1} {...createUploadProgress("/api/upload")}>
          <UploadButton />
        </Upload>
      </Form.Item>

      {/* 底部按钮 */}
      <Form.Item style={{ display: "flex", justifyContent: "flex-end" }}>
        <Space size={"middle"}>
          {/* 取消 */}
          <Button onClick={close}>{t("cancel")}</Button>
          {/* 确定 */}
          <Button type="primary" htmlType="submit">
            {t("confirm")}
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default MyForm;
